<template>
    <div>
        <div v-if="propJson.isDynamic">
            <el-tabs type="border-card" :tempInfo="tabContent" v-if="propJson.editFlag" :style="styles">
                <el-tab-pane v-for="(item, index) in labelInfoList" :key="index" :label="item.labelInfoName">
                    {{ item.labelInfoName }}
                </el-tab-pane>
            </el-tabs>

            <div class="dialogEditContainer" v-if="propJson.editFlag">
                <div class="innerTitle"><span>*动态标签页只支持统一配置* 标签页内部编辑，仅在配置的时候展示, 可以拖入组件</span></div>
                <div style="width: 80%;padding-left: 10%">
                    <draggable :list="propJson.dynamicComponentList"
                               animation="300"
                               :force-fallback="true"
                               :group="{name:'lowcode'}"
                               class="draggableClass"
                               item-key="id"
                    >
                        <template #item="{ element }">
                            <div class="itemClass">
                                <component :is="element.component" :propJson="element.propJson" v-if="itemFlag" :commonParam="commonParam" @click.stop="" @dblclick.stop="changeComponentInfoDynamic(element)"/>
                                <component is="CloseCircleOutlined" class="closeClass" @click.stop="" @dblclick.stop="deleteComponentDynamic(element)"/>
                            </div>
                        </template>
                    </draggable>
                </div>
            </div>

            <el-tabs type="border-card" :tempInfo="tabContent" v-if="!propJson.editFlag">
                <el-tab-pane v-for="(item, index) in labelInfoList" :key="index" :label="item.labelInfoName">
                    <div>
                        <component v-for="componentItem in propJson.dynamicComponentList" :is="componentItem.component" :propJson="componentItem.propJson" :commonParam="commonParam">
                            <template v-slot:[itemSlot.slotName]="slotProps" v-for="itemSlot in slotList">
                                <slot :name="itemSlot.slotName" :slotProps="slotProps"></slot>
                            </template>
                        </component>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div v-if="!propJson.isDynamic">
            <el-tabs type="border-card" :tempInfo="tabContent" v-if="propJson.editFlag" :style="styles">
                <el-tab-pane v-for="(item, index) in propJson.tabsInfoList" :key="index" :label="labelInfoList[index].labelInfoName">
                    {{ labelInfoList[index].labelInfoName }}
                </el-tab-pane>
            </el-tabs>

            <div class="dialogEditContainer" v-if="propJson.editFlag" v-for="(item, index) in propJson.tabsInfoList">
                <div class="innerTitle"><span>标签页内部编辑，仅在配置的时候展示, 可以拖入组件</span></div>
                <div class="innerTitle"><span>标签名称：{{labelInfoList[index].labelInfoName}}</span></div>
                <div style="width: 80%;padding-left: 10%">
                    <draggable :list="item.labelContentComponentList"
                               animation="300"
                               :force-fallback="true"
                               :group="{name:'lowcode'}"
                               class="draggableClass"
                               item-key="id"
                    >
                        <template #item="{ element }">
                            <div class="itemClass">
                                <component :is="element.component" :propJson="element.propJson" v-if="itemFlag" :commonParam="commonParam" @click.stop="" @dblclick.stop="changeComponentInfo(element, item)"/>
                                <component is="CloseCircleOutlined" class="closeClass" @click.stop="" @dblclick.stop="deleteComponent(element, item)"/>
                            </div>
                        </template>
                    </draggable>
                </div>
            </div>

            <el-tabs type="border-card" :tempInfo="tabContent" v-if="!propJson.editFlag" :tagInfo="tagInfo" :style="styles">
                <el-tab-pane v-for="(item, index) in propJson.tabsInfoList" :key="index">
                    <template #label>
                        <span class="custom-tabs-label">
                            <span>{{labelInfoList[index].labelInfoName}}</span>
                            <el-tag v-if="item.isAddTagInfo && tagInfoList[index].tagInfoValue" style="margin-left: 15px" effect="dark" round type="danger" size="small">
                              {{ tagInfoList[index].tagInfoValue }}
                            </el-tag>
                        </span>
                    </template>
                    <div>
                        <component v-for="componentItem in item.labelContentComponentList" :is="componentItem.component" :propJson="componentItem.propJson" :commonParam="commonParam">
                            <template v-slot:[itemSlot.slotName]="slotProps" v-for="itemSlot in slotList">
                                <slot :name="itemSlot.slotName" :slotProps="slotProps"></slot>
                            </template>
                        </component>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script name="TabsComponent" lang="ts" setup>
import {doThirdServiceValue} from "@/utils/lowcode/thirdService";
import {deepCopy} from "@/utils/ywuCommon";
import {getCommonParamObj} from "@/utils/commonParamUtil";
import {computed, ref, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let labelInfoList = ref([]);
let tagInfoList = ref([]);
let itemFlag = ref(true);

let tabContent = computed(() => {
    if (propJson.value.isDynamic) {
        doResponseDynamic();
    } else {
        doResponseStatic();
    }
});

let styles = computed(() => {
    let temp = "";
    if (propJson.value.backGroundColor) {
        temp += "background-color: " + propJson.value.backGroundColor + " ;";
    }
    return temp;
})

let tagInfo = computed(() => {
    let tabList = propJson.value.tabsInfoList;
    for (let i = 0; i < tabList.length; i++) {
        tagInfoList.value.push({tagInfoValue: ""});
    }
    for (let i = 0; i < tabList.length; i++) {
        let tabInfo = tabList[i];
        if (tabInfo.isAddTagInfo) {
            let execParam = {
                id: i
            }
            doThirdServiceValue(tabInfo.tagInfo, commonParam.value, execTagInfoThen, () => {}, execParam)
        }
    }
});

let slotList = computed(() => {
    let res = getCommonParamObj(commonParam.value, "templateSlotInfo")
    return res.variableValue;
})

if (propJson.value.isDynamic) {
    doResponseDynamic()
} else {
    for (let index = 0; index < propJson.value.tabsInfoList.length; index++) {
        labelInfoList.value.push({
            id: index,
            labelInfoName: ""
        })
    }
}

function execThen(resValue, execParam) {
    if (!resValue && propJson.value.editFlag) {
        labelInfoList.value[execParam.id].labelInfoName = "暂无数据"
    } else {
        labelInfoList.value[execParam.id].labelInfoName = resValue
    }
}

function execCatch(resValue) {

}

function execThenDynamic(resValue, execParam) {
    labelInfoList.value = [];
    for (let index = 0; index < resValue.length; index++) {
        labelInfoList.value.push({
            id: index,
            labelInfoName: resValue[index]
        })
    }
}

function execCatchDynamic(resValue) {

}

async function doResponseStatic() {
    // 遍历调用
    for (let index = 0; index < propJson.value.tabsInfoList.length; index++) {
        let execParam = {
            id: index
        }
        doThirdServiceValue(propJson.value.tabsInfoList[index].labelInfo, commonParam.value, execThen, execCatch, execParam)
    }
}

async function doResponseDynamic() {
    doThirdServiceValue(propJson.value.dynamicLabelInfo, commonParam.value, execThenDynamic, execCatchDynamic, null)
}

function changeComponentInfo(element, item) {
    let lowCodeStore = useLowCodeStore();
    lowCodeStore.resetCurrentDrawer(element.drawerComponent)
    lowCodeStore.resetCurrentDrawerElementId(element.id);
    lowCodeStore.resetCurrentDrawerTitle(element.title)
    let copyJson = deepCopy(element.propJson)
    lowCodeStore.resetLowCodeDrawerJsonInfo(copyJson);
    lowCodeStore.resetIsShowDrawer(true)
    lowCodeStore.resetLowCodeComponentList(item.labelContentComponentList)
}

function deleteComponent(element, item) {
    let colList = item.labelContentComponentList
    // 获取当前列的LIST
    let index = -1;
    // 遍历当前列表，删除元素ID对应的数据
    for (let i = 0; i < colList.length; i++) {
        if (colList[i].id === element.id) {
            index = i;
        }
    }
    if (index >= 0) {
        item.labelContentComponentList.splice(index, 1);
    }
}

function changeComponentInfoDynamic(element) {
    let lowCodeStore = useLowCodeStore();
    lowCodeStore.resetCurrentDrawer(element.drawerComponent)
    lowCodeStore.resetCurrentDrawerElementId(element.id);
    lowCodeStore.resetCurrentDrawerTitle(element.title)
    let copyJson = deepCopy(element.propJson)
    lowCodeStore.resetLowCodeDrawerJsonInfo(copyJson);
    lowCodeStore.resetIsShowDrawer(true)
    lowCodeStore.resetLowCodeComponentList(item.labelContentComponentList)
}

function deleteComponentDynamic(element) {
    let colList = propJson.value.dynamicComponentList
    // 获取当前列的LIST
    let index = -1;
    // 遍历当前列表，删除元素ID对应的数据
    for (let i = 0; i < colList.length; i++) {
        if (colList[i].id === element.id) {
            index = i;
        }
    }
    if (index >= 0) {
        propJson.value.dynamicComponentList.splice(index, 1);
    }
}


function execTagInfoThen(resValue, execParam) {
    tagInfoList.value[execParam.id].tagInfoValue = resValue
}
</script>

<style scoped lang="less">
.dialogEditContainer {
    //width: 100%;
    border: 1px solid #dcdfe6;
    .innerTitle {
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .itemClass {
        position: relative;
        transition: box-shadow 0.3s ease;
        margin-bottom: 0.3%;
        .closeClass {
            display: none;
        }
    }
    .itemClass:hover {
        cursor: pointer;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
        .closeClass {
            position: absolute;
            color: #e76565;
            top: 2px;
            right: 2px;
            display: block;
        }
    }
}
</style>